import { computed, defineComponent, ref } from 'vue';
import Customizing from './Customizing.vue';
import DefaultSlotParameters from './DefaultSlotParameters.vue';
import PopupWithEditor from './PopupWithEditor.vue';
import Standalone from './Standalone.vue';
import TextArea from './TextArea.vue';
import WithButtons from './WithButtons.vue';
import WithTable from './WithTable.vue';
import WithValidation from './WithValidation.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Customizing</h5>
            <Customizing />
          </div>
          <div class='block-'>
            <h5 class='title'>DefaultSlotParameters</h5>
            <DefaultSlotParameters />
          </div>
          <div class='block-'>
            <h5 class='title'>PopupWithEditor</h5>
            <PopupWithEditor />
          </div>
          <div class='block-'>
            <h5 class='title'>Standalone</h5>
            <Standalone />
          </div>
          <div class='block-'>
            <h5 class='title'>TextArea</h5>
            <TextArea />
          </div>
          <div class='block-'>
            <h5 class='title'>WithButtons</h5>
            <WithButtons />
          </div>
          <div class='block-'>
            <h5 class='title'>WithTable</h5>
            <WithTable />
          </div>
          <div class='block-'>
            <h5 class='title'>WithValidation</h5>
            <WithValidation />
          </div>
        </div>
      );
    };
  },
});
